<template>
  <el-row class="aside">
    <el-col :span="24">
      <el-menu default-active="0" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
        background-color="#24406c" text-color="#98e4f7" active-text-color="#000">
        <el-menu-item :index="item.id" v-for="item in menu" :key="item.id" @click="navDispose(item.url)">
          <span v-text="item.name"></span>
        </el-menu-item>
      </el-menu>
    </el-col>
  </el-row>
</template>

<script>
  import menu from '@/config/menu'
  export default {
    data() {
      return {
        menu: menu
      }
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath)
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath)
      },
      navDispose(url) {
        this.$router.push({
          path: url
        });
      }
    }
  }

</script>


<style lang="scss" scoped>
</style>
